<template>
	<view>
		<view class="mtop">
			<view class="hetop">
				<view class="himgda">
					<image src="/static/sjimg/yonghu.png" mode="scaleToFill" class="heimg" v-if="memberinfo.imgurl==''||memberinfo.imgurl==null"></image>
					<image :src="imgurl+memberinfo.imgurl" mode="scaleToFill" class="heimg" v-else></image>
				</view>
				<view class="hitxt" @click="login" v-if="isshow">
					<view class="titxt1"> 欢迎登录 </view>
					<view class="titxt2"> TEL： </view>
				</view>
				<view class="hitxt" v-else  @click="gaiheader">
					<view class="titxt1">
						<text>{{ nickname }}</text>
						<image src="/static/sjimg/pt.png" mode="scaleToFill" class="denji" v-if="memberinfo.plus==0"></image>
						<image src="/static/sjimg/vip.png" mode="scaleToFill" class="denji" v-if="memberinfo.plus==1"></image>
						<image src="/static/sjimg/svip.png" mode="scaleToFill" class="denji" v-if="memberinfo.plus==2"></image>
					</view>
					<view class="titxt2" v-if="memberinfo.tel"> TEL：{{ memberinfo.tel }}</view>
				</view>
			</view>
			<view class="xmcss">
				<view class="qcbox">
					<image src="../../static/sjimg/07.png" mode="scaleToFill" class="cenimg"></image>
					<view class="qtxt"> <text>我的小万券</text> <text>可消费：{{ memberinfo.balance_juan ? memberinfo.balance_juan:0 }}</text> </view>
				</view>
				<view class="qcbox">
					<view class="qtxt"> <text>我的佣金</text> <text>可提现：{{ memberinfo.balance ? memberinfo.balance:0 }}</text> </view>
					<image src="../../static/sjimg/08.png" mode="scaleToFill" class="cenimg"></image>
				</view>
			</view>
			<view class="procss">
				<view class="dencss">
					<text class="letxt">我的等级</text>
					<text class="letxt1" @click="shuomin">等级说明</text>
				</view>
				<view class="progress-container">
					<view class="progress-step" v-for="(step, index) in steps" :key="index">
						<view class="step-number" :class="{ 'active': memberinfo.plus >= index }"> 推广{{ step.value }}个会员 </view>
						<view class="step-circle" :class="{ 'active': memberinfo.plus >= index }"></view>
						<view class="step-text" :class="{ 'active': memberinfo.plus >= index }"> {{ step.name }} </view>
						<view v-if="index < steps.length - 1" :class="['progress-line', { 'active': memberinfo.plus > index }]"></view>
					</view>
				</view>
			</view>
			<view class="leibie">
				<text class="letxt">我的工具</text>
				<view class="gontbx">
					<view class="bileibox" v-for="(item,index) in tabs" :key="index" @click="goto(index)">
						<image :src="item.pic" mode="scaleToFill" class="leimgs"></image>
						<text class="iltxt">{{item.txt}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="loginpopup" type="bottom" background-color="#fff" border-radius="20px 20px 0 0">
			<view class="loginsd">
				<view class="welconcss"> 
					<image src="https://m.aqbwg.cn/sourse/xiaowan/logo.png" mode="widthFix" class="logo"></image>
				</view>
				<view class="boxtxt">
					<button class="bt3" @tap="getLogin()"  v-if="!show">一键登录</button>
					<button class="bt3" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumber" v-if="show"> 手机号快捷登录 </button>
					<view class="untxt" @click="unlogin"> 取消登录 </view>
				</view>
				<view class="btans">
					<uni-icons type="checkbox-filled" size="24" :color="such" @click="sure"></uni-icons>
					<view class="wntxt">
						<text class="tys1">点击按钮即代表你已阅读并同意</text>
						<text class="tys" @click="xieyis">《用户注册协议》</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="headpopup" type="bottom" background-color="#fff" border-radius="20px 20px 0 0">
			<view class="loginsd">
				<view class="welconcss"> 修改头像+昵称 </view>
				<view class="hesd">
					<view class="spbcent">
						<view class="hedimg">
							<uni-icons type="camera" size="30" color="#ff4a82" @click="changImage" v-if="!tpimg"></uni-icons>
							<image :src="tpimgs" mode="scaleToFill" v-else class="img1" @click="lookImage(tpimg)"> </image>
						</view>
						<text v-if="!tpimg">点击上传头像</text>
						<text v-else @click="del">删除当前头像</text>
					</view>
					<view class="ncdsc">
						<view class="nkctxt">昵称</view>
						<uni-easyinput v-model="names" placeholder="请输入昵称"></uni-easyinput>
					</view>
					<view class="btn" @click="save"> 保存头像 </view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="vippopup" type="center" border-radius="20px 20px 20px 20px" background-color="#fff">
			<view class="vippoimg">
				<text class="vtxt">等级说明</text>
				<image src="https://m.aqbwg.cn/sourse/xiaowan/vipimage.png" mode="widthFix"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad } from '@dcloudio/uni-app';
	import { apiWxnewlogin , apiWxphone , apiWxreg , apiMerber } from '@/api/upapi.js';
	
	const isshow =ref(true);
	const nickname = ref('初见小万');
	const show = ref(false);
	const memberinfo = ref({});
	const loginpopup =ref(null);
	const vippopup =ref(null);
	const headpopup =ref(null);
	const openids = ref('');
	const tokens = ref('');
	const yaoId = ref('');
	const key = ref('');
	const such = ref('#a3a3a3');
	const imgurl = ref('https://h.foomi.cn:9009/files/upload/');
	const steps = ref([
		{ name: '初见小万', value: 0 },
		{ name: 'VIP', value: 1 },
		{ name: 'SVIP', value: 9 }
	]);
	const tabs = ref([
		{ txt:'邀请有礼',pic:'/static/sjimg/m2.png' },
		{ txt:'福利社群',pic:'/static/sjimg/m3.png' },
		{ txt:'客服中心',pic:'/static/sjimg/m7.png' },
		{ txt:'招商加盟',pic:'/static/sjimg/m4.png' },
		{ txt:'关于我们',pic:'/static/sjimg/m6.png' },
		{ txt:'帮助中心',pic:'/static/sjimg/m8.png' },
		{ txt:'用户协议',pic:'/static/sjimg/m5.png' },
		{ txt:'系统设置',pic:'/static/sjimg/m1.png' }
	]);
	const memberId = ref('');
	const tpimg = ref(null);
	const tpimgs = ref(null);
	const tp = ref('');
	const names = ref('');
	
	const del = () => { tp.value=''; tpimg.value=''; tpimgs.value=''; };
	const xieyis = () => { 
		uni.navigateTo({ url:'/pagesA/webvie/webvie?url=https://f.foomi.cn/unipay/xiaowan.html'+'&title=用户注册协议' })
	};
	const shuomin = () => { vippopup.value.open(); };
	const gaiheader = () => {
		if(!memberId.value){ uni.showToast({ title: '请先登录',icon:'none' }); return; }
		headpopup.value.open();
		tp.value='';
		tpimg.value='';
		tpimgs.value='';
	};
	const sure = () => { such.value = such.value == '#a3a3a3' ? '#ff4a82' : '#a3a3a3'; };
	const login = () => { loginpopup.value.open(); };
	const goto = (e) => {
		console.log('e==',e);
		if(!memberId.value){ uni.showToast({ title: '请先登录',icon:'none' }); return; }
		if(e==0){
			uni.navigateTo({ url: '/pagesA/myother/tuiguang' });
		}else if(e==1){
			uni.showToast({ title: '暂未开放',icon:'none' });
		}else if(e==2){
			uni.navigateTo({ url: '/pagesA/myother/service' });
		}else if(e==3){
			uni.navigateTo({ url: '/pagesA/myother/join' });
		}else if(e==4){
			uni.showToast({ title: '暂未开放',icon:'none' });
		}else if(e==5){
			uni.showToast({ title: '暂未开放',icon:'none' });
		}else if(e==6){
			uni.showToast({ title: '暂未开放',icon:'none' });
		}else if(e==7){
			uni.showToast({ title: '暂未开放',icon:'none' });
		}
	};
	// 个人信息
	const initData = async () => {
		try {
			let res = await apiMerber({
				memberid: memberId.value
			});
			if(res.data.result==0){
				isshow.value=false;
				loginpopup.value.close();
				const data= res.data.object;
				memberinfo.value=data;
				if(data.name){ nickname.value=data.name; };
				uni.setStorageSync('xwmemberInfo', data);
				uni.setStorageSync('xwmemberId', data.id);
			}else{
				uni.setStorageSync('xwmemberId', '');
				uni.setStorageSync('xwmemberInfo', '');
				isshow.value=true;
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	// 登录
	const getLogin = async () => {
		if (such.value!='#ff4a82') { uni.showToast({ title: '请同意条约',icon:'none'  }); return; }
		my.getAuthCode({
		    scopes: 'auth_user',
		    success: async(res) => {
				const res1 = await apiWxnewlogin({ mid:133, authCode: res.authCode });
				console.log('optitons====',res1);
				if(res1.data.result==0){
					const data = res1.data.object;
					if (data.member==''||data.member==null) {
						show.value = true;
						tokens.value=data.accessToken;
						openids.value=data.ali_uId;
					} else {
						uni.setStorageSync('xwmemberInfo', res1.data.object.member)
						uni.setStorageSync('xwmemberId', res1.data.object.member.id)
						loginpopup.value.close();
						isshow.value=false;
						show.value = false;
						memberId.value=res1.data.object.member.id;
						initData();
					}
				}else{
					uni.showToast({ title: res1.data.msg , icon:'none' }); return;
				}
		    },
		    fail: (err) => {
		        console.error('获取授权码失败：', err);
		    }
		});
	};
	const getPhoneNumber = async()=>{
		my.getPhoneNumber({
		    success: async(res) => {
		        let encryptedData = res.response;
				const res1 = await apiWxphone({ response:encryptedData });
				if(res1.data.result==0){
					getReg(res1.data.object.mobile);
				}else{
					uni.showToast({ title: res1.data.msg , icon:'none' }); return;
				}
		    },
		    fail: (err) => {
		        console.error('获取手机号失败:', err);
		    }
		});
	};
	const getReg = async (e) =>{
		try {
			let res = await apiWxreg({
				mid:133,
				member: yaoId.value,
				tel:e,
				ali_uId:openids.value
			});
			if(res.data.result==0){
				uni.showToast({ title: res.data.msg,icon:'none' });
				uni.setStorageSync('xwmemberInfo', res.data.object)
				uni.setStorageSync('xwmemberId', res.data.object.id)
				loginpopup.value.close();
				isshow.value=false;
				show.value = false;
				memberId.value=res.data.object.id;
				initData();
			}else{
				uni.showToast({ title: res.data.msg,icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const unlogin = () => { loginpopup.value.close(); isshow.value=true; };
	const changImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'],
			success: (res) => {
				const tempFilePaths = JSON.stringify(res.tempFilePaths)
				const regex = /\["(.+?)"/;
				const match = tempFilePaths.match(regex);
				const firstElement = match? match[1] : null;
				tpimg.value=firstElement
				tpimgs.value=res.tempFilePaths
				uni.uploadFile({
					url: 'https://h.foomi.cn:9009/files/uploadPic',
					filePath:firstElement,
					name: 'file',
					success: (res) => {
						tp.value = res.data;
					},
					fail(err) {
						console.error('失败',err);
					}
				});
			},
		});
	};
	const lookImage = (e) => { uni.previewImage({ urls: [e] }) };
	const save = async () => {
		if (!tp.value) { uni.showToast({ title: '请上传头像',icon:'none'  }); return; }
		if (!names.value) { uni.showToast({ title: '请输入昵称',icon:'none'  }); return; }
		const memberid = uni.getStorageSync('xwmemberId');
		try {
			let res = await apiHeader({
				memberId: memberid,
				imgUrl: tp.value,
				name:names.value
			});
			uni.showToast({ title: res.data.msg,icon:'none'  });
			headpopup.value.close();
			tp.value='';
			tpimg.value='';
			tpimgs.value='';
			initData();
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	
	onLoad(() => {
		const tjCode = uni.getStorageSync('tjCode');
		if(tjCode){
			yaoId.value=tjCode
			console.log('ttt===',yaoId.value);
		}
		my.setNavigationBar({
		  frontColor: '#000',
		  backgroundColor: '#ffeaf0',
		})
	});
	onShow(() => {
		const mervalue = uni.getStorageSync('xwmemberId');
		if(mervalue){
			memberId.value=mervalue
			isshow.value=false;
			initData();
		}else{
			isshow.value=true;
		}
	});
</script>
<style>
	page{background: linear-gradient(to top,  #fff 80%, #ffeaf0 100% );}
</style>
<style lang="scss" scoped>
	.mtop {
		padding:10rpx 30rpx 30rpx;
		.hetop{
			display: flex;
			align-items: center;
			.himgda{
				width:110rpx;
				height:110rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 110rpx;
				.heimg{
					width:108rpx;
					height:108rpx;
				}
			}
			
			.hitxt{
				flex: 1;
				margin-left: 20rpx;
				.titxt1{
					font-size: 28rpx;
					color: #323232;
					font-weight: bolder;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					.denji{
						height: 40rpx;
						width: 120rpx;
						margin-left: 20rpx;
					}
				}
				.titxt2{
					font-size: 24rpx;
					color: #7a7a7a;
				}
			}
		}
		.xmcss{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;
			.qcbox{
				width: 48%;
				height: 134rpx;
				overflow: hidden;
				position: relative;
				.cenimg{
					width: 330rpx;
					height: 134rpx;
					position: absolute;
					left: 0;
					top: 0;
					z-index:0;
				}
				.qtxt{
					padding-left: 30rpx;
					position: absolute;
					z-index: 2;
					display: flex;
					height: 134rpx;
					flex-direction: column;
					justify-content: center;
					>text:first-child{
						font-size: 28rpx;
						font-weight: bold;
					}
					>text:last-child{
						font-size: 24rpx;
						color: #7a7a7a;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	
	.loginsd{
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		flex-direction: column;
		
		.welconcss{
			font-size: 28rpx;
			color: #ff4a82;
			text-align: center;
			margin-bottom: 60rpx;
			font-weight: bolder;
			
			.logo{
				width: 255rpx;
			}
		}
		.boxtxt{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.bt3{
			font-size: 28rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 50rpx;
			font-weight: bold;
			background: #ff4a82;
			color: #fff;
			width: 45%;
			margin: inherit;
		}
		.lotxt{
			width: 45%;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			background-color: #ff4a82;
			padding: 25rpx 0;
			border-radius: 60rpx;
			color: #fff;
		}
		.untxt{
			width: 45%;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			background-color: #ececec;
			padding: 25rpx 0;
			border-radius: 60rpx;
			color: #686868;
		}
		.btans {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			margin-top: 30rpx;
			.wntxt {
				margin-left: 10rpx;
				font-size: 22rpx;
			}
			
			.tys1 {
				color: #4f4f4f;
			}
			
			.tys {
				color: #ff4a82;
			}
		}
	}
	.zhurdnei {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		padding: 30rpx 0 0;
		border-radius: 20rpx;
	
		.zhds {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			margin-bottom: 30rpx;
		}
	
		.imgmou1 {
			width: 70rpx;
			margin-bottom: 10rpx;
		}
	}
	.badge{
		font-size: 20rpx;
		background-color: red;
		color: #fff;
		padding: 4rpx 10rpx;
		position: absolute;
		margin-left: 94rpx;
		border-radius: 200rpx;
	}
	.muord{
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius:30rpx;
		padding: 20rpx 0 30rpx;
		display: flex;
		flex-direction: column;
		.mqb1s{
			display: flex;
			padding: 0 30rpx 20rpx;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			border-bottom: 2rpx dashed #c6c6c6;
			.mqbt1xt{
				font-weight: bold;
				font-size: 28rpx;
				color: #000000 !important;
			}
		}
		.muordnei{
			padding-top: 20rpx;
			display: flex;
			justify-content: space-between;
		}
		.mousd{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;
			.imgmou{
				width:70rpx;
				margin-bottom: 10rpx;
			}
			>text{
				font-size: 26rpx;
			}
		}
	}
	.btn {
		padding: 20rpx;
		background-color: #ff4a82;
		color: #fff;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		margin-top: 120rpx;
		justify-content: center;
	}
	
	.spbcent {
		display: flex;
		flex-direction: column;
		align-items: center;
	
		>text {
			color: #939393;
		}
	
		.hedimg {
			width: 200rpx;
			height: 200rpx;
			border-radius: 180rpx;
			border: 2rpx dashed #ff4a82;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;
	
			.img1 {
				width: 180rpx;
				height: 180rpx;
				border-radius: 180rpx;
			}
		}
	}
	.ncdsc{
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		.nkctxt{
			font-size: 28rpx;
			margin-right: 20rpx;
		}
	}
	.procss{
		margin: 26rpx 0;
		padding:0 0  20rpx;
		border-radius: 20rpx;
		background: linear-gradient(to left, #fff5f8,  #fffafc );
		.dencss{
			padding: 20rpx 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.letxt{
				font-size: 26rpx;
				font-weight: 600;
			}
			.letxt::before{
				content: "";
				display: inline-block;
				width: 8rpx;
				height: 0.26rem;
				background-color: #ff4a82;
				margin-right: 10rpx;
				border-radius: 20rpx;
			}
			.letxt1{
				font-size: 24rpx;
				color: #8a8a8a;
			}
		}
		.progress-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.progress-step {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				width: 100%;
				.step-number {
					font-size: 22rpx;
					color: #999;
					margin-bottom: 10rpx;
					transition: color 0.3s ease;
				}
				
				.step-number.active {
					color: #ff6699;
				}
				.step-circle {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: #c5c5c5;
					z-index: 2;
					transition: background-color 0.3s ease;
				}
				
				.step-circle.active {
					background-color: #ff6699;
				}
				
				.step-text {
					font-size: 24rpx;
					color: #838383;
					margin-top: 10rpx;
					transition: color 0.3s ease;
				}
				
				.step-text.active {
					color: #ff6699;
				}
				
				.progress-line {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 100%;
					height: 4rpx;
					background-color: #c5c5c5;
					z-index: 1;
					transform: translateY(-50%);
					transition: background-color 0.3s ease;
				}
				
				.progress-line.active {
					background-color: #ff6699;
				}
			}
		}
	}
	.leibie{
		border: 2rpx solid #e3e3e3;
		padding: 20rpx 0;
		border-radius: 20rpx;
		.letxt{
			font-size: 26rpx;
			font-weight: 600;
			padding-left: 20rpx;
		}
		.letxt::before{
			content: "";
			display: inline-block;
			width: 8rpx;
			height: 0.26rem;
			background-color: #ff4a82;
			margin-right: 10rpx;
			border-radius: 20rpx;
		}
		.gontbx{
			display: flex;
			flex-wrap: wrap;
			.bileibox{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				padding: 20rpx 0;
				.leimgs{
					width: 60rpx;
					height: 60rpx;
				}
				.iltxt{
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #737373;
				}
			}
		}
	}
	.vippoimg{
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		
		.vtxt{
			font-size: 26rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		.vtxt::before{
			content: "";
			display: inline-block;
			width: 8rpx;
			height: 0.26rem;
			background-color: #ff4a82;
			margin-right: 10rpx;
			border-radius: 20rpx;
		}
	}
</style>
